<template>
  <div id="login">
    <div class="login-box">
      <div class="login-main">
        <div class="main">
          <div class="login-logo" @click="goto(value)">
            <img :src="img" alt />
          </div>
          <!-- <div class="login-type">
            <div class="normalLogin checked fl">
              <input type="radio" name="login" value="普通登录" checked="checked">
              {{name1}}
            </div>
            <div class="telLogin checked fr">
              <input type="radio" name="login" value="手机号快速登录">
              {{name2}}
            </div>
          </div>-->
          <div class="null">
            <i class="user">
              <img src="../../assets/img/user.png" alt />
            </i>
            <i class="key">
              <img src="../../assets/img/key.png" alt />
            </i>
          </div>
          <div class="form">
            <div class="username">
              <input type="text" v-model="account" class="name" placeholder="邮箱 / 手机 / 用户名" />
            </div>
            <div class="password">
              <input type="password" v-model="password" class="pass" placeholder="请输入密码" />
            </div>
          </div>
          <div class="remenber">
            <div class="fl">
              <input id="remenber" v-model="remenber" type="checkbox" name="remenber" />
              <label for="remenber">记住我</label>
            </div>
            <router-link to="/found" class="fr">找回密码</router-link>
          </div>
          <div class="submit" @click="sign">登录</div>
          <div class="three-account">
            <div class="gotoSignup fr">
              <span>
                <router-link to="/registe">前往注册</router-link>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../api/axios";
export default {
  name: "UserLogin",
  data() {
    return {
      account: "",
      password: "",
      remenber: false,
      img: require("../../assets/img/logo2.png"),
      name1: "普通登录",
      name2: "手机号快速登录"
    };
  },
  methods: {
    goto(value) {
      this.$router.push("/");
    },
    sign() {
      axios
        .post("/user/login", {
          account: this.account,
          password: this.password,
          remenber: this.remenber
        })
        .then(resp => {
          if (resp.code == 0) {
            this.$message.success(resp.msg);
            this.$router.push("/");
          } else {
            this.$message.error(resp.msg);
          }
        });
    }
  }
};
</script>

<style scoped>
#login {
  height: 580px;
  width: 100%;
  background-color: #f1f1ef;
  display: block;
}
.login-box {
  width: 1080px;
  height: 88%;
  /* background-color: blue; */
  margin: 4% auto;
  padding-top: 70px;
}
.login-box .login-main {
  width: 360px;
  height: auto;
  margin: 0 auto;
  background-color: #fff;
}
.login-main {
  min-height: 442px;
  padding: 0 70px 40px;
  /* background-color: aquamarine; */
}
.main {
  width: 100%;
}

/* 图标 */
.main .login-logo {
  padding: 40px 0 0 0;
  width: 100%;
  height: 48px;
  text-align: center;
  display: block;
}
.main .login-logo img {
  height: 48px;
}
.login-logo img:hover {
  cursor: pointer;
}

/* 登录方式 */
/* .main .login-type {
  height: 16px;
}
.main .login-type .normalLogin,
.main .login-type .telLogin {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
}
.login-type .checked {
  color: #222;
} */

/* 图标 */
.main .null {
  height: 35px;
}
.main .null i {
  width: 25px;
  height: 25px;
}
.null i img {
  width: 25px;
  height: 25px;
}
/* 用户 */
.user {
  position: relative;
  left: 10px;
  top: 50px;
}
/* 密码 */
.key {
  position: relative;
  left: -19px;
  top: 113px;
}
/* 输入框 */
.main .form {
  width: 100%;
  height: 135px;
}
.main .form .pass {
  margin-top: 2%;
}
.main .form .name,
.main .form .pass {
  width: 315px;
  /* padding: 14px 10px 12px 0; */
  height: 55px;
  line-height: 22px;
  font-size: 14px;
  border: 1px solid #ddd;
  display: block;
  background: none;
  outline: none;
}
.main .form input {
  padding-left: 45px;
}
.main .form input::-webkit-input-placeholder {
  color: #8a8a8a;
}
.main .form input:focus {
  border: 1.5px solid #29a3d6;
  /* border-bottom-left-radius: 1px;
  border-bottom-right-radius: 1px; */
}

/* 记住我选项 */
.main .remenber {
  overflow: hidden;
  padding: 15px 0 30px 0;
}

/* 第一种解决方案：css3样式改变checkbox默认样式 */
input[type="checkbox"] + label::before {
  content: "\a0"; /* 不换行空格 */
  display: inline-block;
  vertical-align: 2px;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #000;
  text-indent: 2px;
  line-height: 0.65; /* 行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高 */
}
input[type="checkbox"]:checked + label::before {
  content: "\2713"; /* 对号的 Unicode 编码 */
  background-color: #29a3d6; /* 选中的背景颜色 */
}
input[type="checkbox"] {
  /* 隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 这种简单直接的方式，
       是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除 */
  position: absolute;
  clip: rect(0, 0, 0, 0); /* 隐藏方式一：裁剪为0 */
  /* visibility: hidden; */ /* 隐藏方式二：隐藏属性 */
}

.remenber label {
  color: #777;
}
.remenber a {
  color: #4a82b1;
}
.remenber a:hover {
  text-decoration: underline;
}

/* 登录按钮 */
.main .submit {
  margin-bottom: 20px;
  letter-spacing: 18px;
  text-align: center;
}
.submit {
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #29a3d6;
  text-decoration: none;
  opacity: 0.8;
}
.submit:hover {
  cursor: pointer;
  opacity: 1;
}

/* 其他登录方式 */
.main .three-account {
  height: 40px;
}
.account {
  height: 100%;
  width: 220px;
  display: inline;
}
.three-account .sina,
.three-account .tencent,
.three-account .wechat {
  margin-right: 8%;
  opacity: 0.8;
}
.three-account .sina img,
.three-account .tencent img,
.three-account .wechat img {
  height: 40px;
  width: 40px;
}
.three-account .sina:hover,
.three-account .tencent:hover,
.three-account .wechat:hover {
  opacity: 1;
  cursor: pointer;
}

.gotoSignup {
  height: 100%;
  width: 130px;
  line-height: 40px;
  color: #777;
}
.gotoSignup a {
  color: #4a82b1;
}
.gotoSignup a:hover {
  text-decoration: underline;
}
</style>
